<!-- 图片列表 -->
<template>
  <div class="release">
    <div class="top">
      <span @click="$router.go(-1)"> <i>&lt;</i> 我的相册</span>
      <span @click="onSubmit">发布</span>
    </div>
    <!-- 表单 -->
    <!-- 单选 -->
    <div class="from">
      <el-form :model="form" label-width="120px">
        <!-- 发布范围 -->
        <el-form-item label="发布范围">
          <el-radio-group v-model="form.resource">
            <el-radio label="全校" />
            <el-radio label="全部班级" />
            <el-radio label="全部教室" />
            <el-radio label="指定班级/教师组" />
          </el-radio-group>
        </el-form-item>
        <!-- 内容 -->
        <el-form-item label="内容：">
          <el-input
            v-model="form.desc"
            type="textarea"
            placeholder="写下精彩内容"
          />
        </el-form-item>

        <!-- 上传 -->
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :on-change="handleChange"
        >
          <el-button type="primary">上传图片</el-button>
          <template #tip>
            <div class="el-upload__tip">
              最多支持上传6张，支持jpg，jpeg，png，bmg格式，大小不能超过5mb
            </div>
          </template>
        </el-upload>
      </el-form>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import type { UploadProps, UploadUserFile } from "element-plus";
// import { image_list } from "../../../utils/login_r";

onMounted(() => {
  // 发布
  //   image_list().then((res) => {
  //     myimglist.value = res.data.userinfo;
  //     console.log(myimglist.value);
  //   });
});

// do not use same name with ref
const form = reactive({
  resource: "", //发布范围
  desc: "", //内容
});

// 上传
// 定义文件列表
const fileList = ref<UploadUserFile[]>([
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
  {
    name: "food2.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  },
]);

const handleChange: UploadProps["onChange"] = (uploadFile, uploadFiles) => {
  fileList.value = fileList.value.slice(-3);
};

// 发布
const onSubmit = () => {
  console.log("submit!", form.resource, form.desc, fileList.value);
};
</script>
  
  
  
  
  <style   scoped>
.top {
  line-height: 60px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.39);
  position: fixed;
  top: 0;

  display: flex;
  justify-content: space-between;
}
.top span {
  margin: 0 20px;
  font-size: 14px;
  cursor: pointer;
  color: #1890ff;
}
.from {
  margin: 80px;
}
.label {
  font-size: 14px;
  padding: 0 20px;
}
.ml-4 el-radio {
  padding: 0 20px;
  margin: 20px;
}
</style>
  
  
  
  
  